<template>
	<view class="body">
		<view id="banner">
			<swiper :style="{'height':bheight+'px'}" :indicator-dots="indicatorDots" autoplay=true :interval="interval" :duration=300>
				<swiper-item v-for="url of bannerimgs">
					<image :src="url" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view id="hotpingjia" class="pantitle">
			<view class="hotpj">
				<text class="uni-h3">热评</text>
				<text class="discript">不知道选哪款？听听他们怎么说  </text>
			</view>
			<swiper vertical="true" autoplay=false circular=true>
				<swiper-item v-for="item of hotpjList">
					<view class="scroll-view-item">
						<image class="uni-media-list-logo" :src="item.touxiang"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top title">{{item.nicheng}} 对 <text class="uni-card-link"> &nbsp;{{item.jium}}</text> &nbsp;发表了评论</view>
							<view class="uni-media-list-text-top body">{{item.context}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
		</view>
		<view id="tuijian" class="pantitle">
			<view>
				<text class="uni-h3">推荐</text>
				<text class="discript">精选好酒，为你推荐  </text>
			</view>
			<view class="uni-product-list">
				<view class="uni-product" v-for="(product,index) in goodsList" :key="index" @click="navToDetailPage(product.id)">
					<view class="image-view">
						<image class="uni-product-image" :src="product.image"></image>
					</view>
					<view class="uni-product-title">{{product.title}}</view>
					<view class="uni-product-price">
						<text class="price">￥{{product.price}}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				bheight: 350,
				indicatorDots: false, //幻灯片显示指示点
				interval: 3000, //定时切换时间
				bannerimgs: [],
				hotpjList: [],
				goodsList: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				loadmorePage: 0
			}
		},
	    async onLoad(){
			let hotpjList = await this.$api.json('hotpj');
			this.hotpjList = hotpjList || [];
			let bannerimgs = await this.$api.json('bannerimgs');
			this.bannerimgs = bannerimgs;
			this.status = 'more';
			this.getList();
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		methods: {
			getList() {
				if(this.loadmorePage>4){
					this.status = 'noMore';
					return;
				}
				//模拟uni.request获取服务器数据
				let products = require('@/common/product.json');  
				if (products.code == 200) {
					this.goodsList = this.loadmorePage==0?products.data:this.goodsList.concat(products.data);
					this.loadmorePage++;
				}
			},
			//详情页
			navToDetailPage(itemid) {
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: `/pages/kind/product?id=${itemid}`
				})
			}
		}
	}
</script>

<style lang='scss'>
	.pantitle{
		flex-direction: column;
		margin: 20upx 20upx 20upx 20upx;
		border-top: 3upx solid #D9D9D9;
		padding-top: 10upx;
	}

	.pantitle .uni-h3{
		border-left: #0A98D5 solid 2px;
		color: #0A98D5;
		padding-left: 20upx;
		padding-right: 20upx;
	}
	#hotpingjia{
		height: 300upx;
		swiper{
			height: 250upx;
		}
		image{
			width: 80upx;
			height: 80upx;
			border-radius: 30upx;
		}
		.title{
			color: #ABABAB;
		}
	}
	
	.pantitle .discript{
		padding: 8upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-color: #0A98D5;
	}
	swiper-item .scroll-view-item {
		margin-top: 20upx;
		display: flex;
		border: #DDDDDD solid 1px;
		padding: 20upx;
		border-radius: 15upx;
		height: 180upx;
	}
	.uni-media-list-body{
		justify-items: flex-start;
		height: 100%;
		.body{
			display: flex;
			align-items: center;
		}
	}
	.uni-product{
		width: 310upx;
	}
	.uni-product-title{
		font-size: $uni-font-size-base;
	}
	.price{
		color: $uni-text-color-active;
	}
	
</style>
